<!-- 首页页面 -->
<template>
	<view class="login hideToShow">
		<view class="login_title"><text>授权认证平台</text></view>
		<view class="login_container">
			<view class="login_form">
				<text class="icon icon-shouji"></text>
				<input placeholder-class="placeholder" type="text" v-model="user.account" placeholder="请输入账号" />
			</view>
			<view class="login_form">
				<text class="icon icon-jiesuo"></text>
				<input placeholder-class="placeholder" type="text" v-model="user.password" placeholder="请输入密码" :password="!psdShow" />
				<text @tap="psdShow = !psdShow" class="icon" :class="[psdShow ? 'icon-yanjing_xianshi' : 'icon-biyanjing']"></text>
			</view>
			<view class="login_form"><uni-data-checkbox disabled v-model="user.type" :localdata="userType" selectedColor="#04d48e"></uni-data-checkbox></view>
			<view class="login_btn"><button @tap="login()" type="primary">登录</button></view>
			<view class="login_footer">
				<text @tap="$until.showToast('敬请期待')">忘记密码?</text>
				<text @tap="resPopup()">注册</text>
			</view>
		</view>
		<uni-popup ref="popup" type="bottom">
			<view class="popup_container">
				<button type="primary" @tap="toReg(1)">企业注册</button>
				<button type="primary" @tap="toReg(0)">个人注册</button>
			</view>
		</uni-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			timer: null,
			psdShow: false,
			user: {
				type: 'company',
				account: '71160648',
				password: 'i0vogk'
			},
			userType: [
				{
					text: '公司',
					value: 'company'
				},
				{
					text: '个人',
					value: 'man'
				}
			]
		};
	},
	onHide() {
		this.$refs.popup.close();
		if (this.timer) clearTimeout(this.timer);
	},
	methods: {
		//弹出层开启
		resPopup() {
			this.$refs.popup.open();
		},
		toReg(e) {
			if (e) {
				uni.showModal({
					title: '温馨提示',
					content: '请确认本次申请企业注册非个人用户，如属个人用户请选择个人注册',
					success: res => {
						if (res.confirm) {
							uni.navigateTo({
								url: '../regist/regist-page/company-reg'
							});
						}
					}
				});
			} else {
				uni.navigateTo({
					url: '../regist/regist-page/personal-reg'
				});
			}
		},

		login() {
			if (!this.user.account) return this.$until.showToast('请输入登录账户');
			else if (!this.user.password) return this.$until.showToast('请输入登录密码');
			else if (!this.user.type) return this.$until.showToast('请选择个人或公司');
			const callback = () => {
				uni.showLoading({
					title: '登录中'
				});
				uniCloud.callFunction({
					name: 'login',
					data: {
						...this.user
					},
					success: res => {
						uni.hideLoading();
						if (res.result.success) {
							uni.setStorageSync('user', res.result.data);
							uni.setStorageSync('token', res.result.data.token);
							this.$until.showToast(res.result.message, 'none', () => {
								this.timer = setTimeout(() => {
									uni.switchTab({
										url: '/pages/tabbar/menu'
									});
								}, 1200);
							});
						} else this.$until.showToast(`${res.result.message},请重试`);
					},
					fail: err => {
						this.$until.showToast(err);
					}
				});
			};
			this.$debounce(callback, 500);
		}
	}
};
</script>

<style lang="less" scoped>
.login {
	padding: 0rpx 48rpx;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	flex-direction: column;

	.login_title {
		margin: 70rpx 0rpx;
		font-size: 38rpx;
		font-weight: bold;
	}

	.login_container {
		padding: 30rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin: 30rpx 0rpx;
		box-shadow: 1rpx 0rpx 28rpx #00000026;
		border-radius: 20rpx;
		width: 100%;

		.login_form {
			padding: 40rpx 0rpx;
			width: 100%;
			box-sizing: border-box;
			border-bottom: 1rpx solid #f0f0f0;
			display: flex;
			align-items: center;
			justify-content: space-between;

			> input {
				width: 100%;
			}

			.placeholder {
				font-size: 24rpx;
				color: #b9b9b9;
			}
			> text {
				width: 60rpx;
			}
			/deep/.uni-data-checklist .checklist-group {
				justify-content: center;
			}
		}

		.login_btn {
			padding-top: 70rpx;
			width: 90%;

			> button {
				height: 84rpx;
				line-height: 84rpx;
				border-radius: 42rpx;
				background-color: #04d48e;
				font-size: 28rpx;
			}
		}

		.login_footer {
			margin: 42rpx 0rpx;

			> text {
				font-size: 26rpx;
				padding: 6rpx 24rpx;
				color: #b0b0b0;

				&:last-child {
					color: #04d48e;
				}
			}
		}
	}
}
.popup_container {
	width: 750rpx;
	background-color: #fff;
	height: 600rpx;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;

	> button {
		width: 80%;
		height: 88rpx;
		line-height: 88rpx;
		border-radius: 44rpx;
		background-color: #04d48e;
		margin: 36rpx 0rpx;
		box-shadow: 0px 8rpx 20rpx #04d48e80;
		font-size: 28rpx;

		&:last-child {
			background-color: #ffba69;
			box-shadow: 0px 8rpx 20rpx #fba94980;
		}
	}
}
</style>
